<template>
  <div class="auto-refresh-push-type-setting">
    <VsFormItem
      :label="$demoi18n('autoRefresh.push.frequency')"
      :prop="`autoRefresh.frequencyType`"
      :rules="generateRules({ required: true, label: $demoi18n('autoRefresh.push.frequency') })"
    >
      <el-select v-model="form.autoRefresh.frequencyType" :placeholder="$demoi18n('word.plsSelect')" size="default">
        <el-option
          v-for="(item, index) in frequencyTypes"
          :key="index"
          :label="getItemLabel(item)"
          :value="item.type"
          :title="`${getItemLabel(item)}: ${item.frequency}`"
        ></el-option>
      </el-select>
    </VsFormItem>
  </div>
</template>
<script>
import dataModel from '@/models/panel-config-data.js';
import { generateRules } from '@/utils/rules';
import { getLang } from '@/utils/util';

export default {
  props: {
    form: Object,
    config: Object,
  },
  data() {
    return {
      frequencyTypes: [],
    };
  },
  computed: {
  },
  watch: {},
  mounted() {
    this.getfrequencyTypes();
    if (window.isLocalEnv) {
      this.frequencyTypes = [
        {
          type: '111',
          frequency: 100,
          name: this.$demoi18n('autoRefresh.push.frequency.short'),
        },
      ];
    }
  },
  methods: {
    generateRules,
    getfrequencyTypes() {
      dataModel.getfrequencyTypes().then(result => {
        this.frequencyTypes = result.data || [];
      });
    },
    getItemLabel({ type, name, frequency }) {
      const lang = getLang();
      return `${(lang === 'zh-CN' || lang === 'zh_CN') ? name : type} (${frequency}s)`;
    },
  },
};
</script>
<style lang="less" scoped>
.auto-refresh--push-type-setting {
  margin-bottom: 10px;
}
</style>
